<template>
  <div>
    <el-card style="width: 50vw">
      <div class="block">
        <el-carousel
          height="50vh"
          indicator-position="none"
          arrow="never"
          autoplay
          direction="vertical"
        >
          <el-carousel-item v-for="(item, index) in lists" :key="index">
            <div v-for="(item1, index1) in item" :key="index1">
              {{ item1.name }}
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-card>

    <el-card>
      <el-tooltip placement="top">
        <div slot="content" style="width: 200px; text-align: center" >
          {{ title }}
        </div>
        <el-button style="color: red; border: none; width: 200px">{{
          titles
        }}</el-button>
      </el-tooltip>
    </el-card>
  </div>
</template>

<script>
// import axios from "axios"
import { allList } from "@/api/index";

export default {
  data() {
    return {

      lists: [],
      title: 1,
    };
  },
  computed: {
    titles() {
      if (this.title > 9999 && this.title <= 99999999) {
        return this.title / 10000 + "万";
      } else if (this.title > 99999999) {
        return this.title / 100000000 + "亿";
      } else {
     
   
        return this.title;
      }
    },
  },
  mounted() {
    // setInterval(()=>{
    this.getList();
    // },1000)
  },
  methods: {
    async getList() {
      let newArr = [];
      let num = 3;
      let { data } = await allList();

      if (data.length > 0) {
        this.lists = this.group(newArr, data, num);
      }
    },
    group(newArr, data, num) {
      if (data.length > num) {
        newArr.push(data.splice(0, num));
        this.group(newArr, data, num);
      } else {
        newArr.push(data.splice(0, data.length));
      }
      return newArr;
    },
  },
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;

  margin: 0;
}

/* .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
} */

.el-carousel__item:nth-child(n) {
  background-color: #d3dce6;
}
</style>
